@import '@assets/style/base.scss';

.header-component {
  width: 100%;
  padding: 0 20px;
  background-color: $cor_0;
  &.detail-header {
    background-color: skyblue;
  }
  .header-top {
    height: 60px;
    line-height: 60px;
    text-align: right;

    .logout-btn {
      margin-left: 20px;
      cursor: pointer;
    }
  }


  .brackcrumb {
    border-top: 1px solid #f9c700;

    .brackcrumb-title {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
      position: relative;

      &:after {
        display: block;
        content: '';
        @include arrow(top, 10px, 10px);
        @include pos(absolute, left, top, 50%, 100%, 9);
        margin-left: -10px;
      }
    }

    .weather {
      height: 40px;
      text-align: right;
      @include flex_layout(row, flex-end, center);
      .today-date {
        padding-right: 20px;
      }
      

      .weather-detail {
        @include flex_layout(row, flex-start, center);

        .weather-img {
          height: 21px;
          margin-right: 5px;
        }
      }
    }
  }
}